<template>
  <div id="nav-bar" :style="thisStyle">
    <div class="left">
      <slot name="left"></slot>
    </div>
    <div class="center">
      <slot name="center"></slot>
    </div>
    <div class="right">
      <slot name="right"></slot>
    </div>
  </div>
</template>
<script>
export default {
  name: "NavBar",
  props: {
    backColor: {
      type: String,
      default: "#fff",
    },
    fontColor: {
      type: String,
      default: "#000",
    },
  },
  computed: {
    thisStyle() {
      return { "background-color": this.backColor, color: this.fontColor };
    },
  },
};
</script>
<style scoped>
#nav-bar {
  display: flex;
  position: relative;
  z-index: 1;

  width: 100%;
  height: 44px;
  line-height: 44px;
  text-align: center;
  font-weight: 700;
  font-size: 16px;
}

.center {
  flex: 6;
  display: flex;
  justify-content: space-around;
}

.left,
.right {
  flex: 2;
}
</style>
